<template>
  <ul class="footer">
    <li class="check" @click="click1()"><i class="iconfont icon-index"></i>首页</li>
    <li @click="click2()"><i class="iconfont icon-search"></i>杂志</li>
    <li @click="click3()"><i class="iconfont icon-xingzhuang159fuben13"></i><i class="iconfont icon-font-five-v"></i></li>
    <li @click="click4()"><i class="iconfont icon-shoppingcart"></i>购物车</li>
    <li @click="click5()"><i class="iconfont icon-my"></i>我的</li>
  </ul>
</template>
<script type="text/ecmascript-6">
    export default {
      methods:{
        click1:function () {
          this.$router.push({path:"/"})
        },
        click2:function () {
          this.$router.push({path:"/content"})
        },
        click3:function () {
          this.$router.push({path:"/search"})
        },
        click4:function () {
          this.$router.push({path:"/ShoppingCar"})
        },
        click5:function () {
          this.$router.push({path:"/my"})
        }
      },
      mounted:function () {
        var site=this.$route.path;
        var siteArr=["/","/content","/b","/ShoppingCar","/my"];
        for(let i=0;i<siteArr.length;i++){
          if(site==siteArr[i]){
            $($(".footer li")[i]).addClass("check").siblings().removeClass("check");
          }
        }
      }
    }
</script>
<style scoped>
  .footer{
    height: 0.64rem;
    width: 100%;
    background-color: #1B1B1B;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .footer li{
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    font-size: 0.1rem;
    color: #ffffff;
  }
  .footer li .iconfont{
    font-size: 0.25rem;
  }
  .footer .check{
    color:#C3AF97;
  }
  .footer li .icon-xingzhuang159fuben13{
    position: absolute;
    color: #978474;
    top: -0.5rem;
    font-size: 0.6rem;
    z-index:999;
  }
  .footer li .icon-font-five-v{
    font-size: 0.3rem;
    position: absolute;
    top: -0.4rem;
    color: #000;
    z-index: 999;
  }
</style>
